<template>
  <el-card class="mt">
    <el-form @submit.prevent="() => {}">
      <el-form-item label="属性名">
        <el-input
          placeholder="请输入属性名"
          v-model="addAttrData.attrName"
          class="attrName-input"
        />
      </el-form-item>
      <el-form-item label-width="55px">
        <el-button
          type="primary"
          @click="addAttrValueName"
          :disabled="!addAttrData.attrName"
          >添加属性值</el-button
        >
      </el-form-item>
      <el-table :data="addAttrData.attrValueList" style="width: 100%" border>
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="100px"
        />
        <!-- 属性值名称列 -->
        <el-table-column label="属性值名称" prop="valueName">
          <template #default="{ row, $index }">
            <el-input
              autofocus
              v-if="!row.isHidden"
              v-model="row.valueName"
              @blur="inputOnBlur(row, $index)"
              @keyup.enter="inputOnBlur(row, $index)"
              ref="focusInput"
            />
            <div v-else @click="toShowInput(row)">{{ row.valueName }}</div>
          </template>
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column label="操作">
          <template #default="{ $index }">
            <el-button
              type="danger"
              size="small"
              :icon="Delete"
              @click="delSingleAttrValue($index)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-form-item label-width="55px">
        <el-button
          type="primary"
          :disabled="!addAttrData.attrValueList.find((attr) => attr.valueName)"
          @click="reqAddAttrData"
          >保存</el-button
        >
        <el-button @click="closeAddAttrCom">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts">
export default {
  name: 'addAttr',
}
</script>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { reactive, ref, nextTick, onMounted } from 'vue'
import { Delete } from '@element-plus/icons-vue'

import { useCategoryId } from '@/stores/categoryId'
import { useAttrstore } from '@/stores/attrs'
import { saveAttrInfo } from '@/api/product/attrInfoList'
import type { AddAttrData, AttrValueItem } from '@/views/product/attr/model'

// 获取自定义事件
const emit = defineEmits(['setShowAttrTable'])

// 获取分类id
const categoryIdStore = useCategoryId()

// 表单组件实例
const focusInput = ref()

// 添加属性的表单数据
const addAttrData = reactive<AddAttrData>({
  attrName: '',
  attrValueList: [],
  categoryId: categoryIdStore.category3Id,
  categoryLevel: 3,
  id: undefined,
})

// addAttrName 点击添加属性值按钮的回调
const addAttrValueName = () => {
  addAttrData.attrValueList.push({
    valueName: '',
    isHidden: false,
  })
  nextTick(() => {
    focusInput.value.focus()
  })
}
// 输入框失去焦点
const inputOnBlur = (row: AttrValueItem, index: number) => {
  row.isHidden = true
  if (!row.valueName) {
    addAttrData.attrValueList.splice(index, 1)
  }
}

// 点击展示输入框
const toShowInput = (row: AttrValueItem) => {
  row.isHidden = false
  nextTick(() => {
    focusInput.value.focus()
  })
}
// delSingleAttrValue 删除属性值的回调
const delSingleAttrValue = (index: number) => {
  addAttrData.attrValueList.splice(index, 1)
}

// 取消按钮 关闭添加属性表格的回调
const closeAddAttrCom = () => {
  emit('setShowAttrTable', true)
  attrStore.isEdit = false
  addAttrData.attrName = ''
  addAttrData.attrValueList = []
}
// 点击保存按钮发送添加属性/编辑属性的请求
const reqAddAttrData = async () => {
  // 发送添加数据的请求
  await saveAttrInfo(addAttrData)
  ElMessage.success('保存成功')
  // 关闭添加属性的页面
  closeAddAttrCom()
}

// 是否进入编辑状态
const attrStore = useAttrstore()
onMounted(() => {
  if (attrStore.isEdit) {
    addAttrData.attrName = attrStore.attrData.attrName
    addAttrData.attrValueList = attrStore.attrData.attrValueList
    addAttrData.id = attrStore.attrData.id
  }
})
</script>

<style scoped>
.mt {
  margin: 10px 0;
}
.ml-2 {
  margin-right: 5px;
}
.attrName-input {
  width: 200px;
}
</style>
